import { getOptionsItemByValue } from '#/config/options/utils'
import { copyText } from '#/utils/copyTextToClipboard'
import { $t } from '@vben/locales'
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table'
import { isEmpty, isString } from '@vben/utils'
import { Button, Image, Switch, Tag } from 'ant-design-vue'
import { h, unref } from 'vue'
import { useVbenForm } from './form'

setupVbenVxeTable({
    configVxeTable: (vxeUI) => {
        vxeUI.setConfig({
            grid: {
                align: 'center',
                border: false,
                columnConfig: {
                    resizable: true
                },
                minHeight: 180,
                formConfig: {
                    // 全局禁用vxe-table的表单配置，使用formOptions
                    enabled: false
                },
                proxyConfig: {
                    autoLoad: true,
                    response: {
                        result: 'items',
                        total: 'total',
                        list: 'items'
                    },
                    showActiveMsg: true,
                    showResponseMsg: false
                },
                round: true,
                showOverflow: true,
                size: 'medium'
            }
        })

        // 表格配置项可以用 cellRender: { name: 'CellImage' },
        vxeUI.renderer.add('CellImage', {
            renderTableDefault(_renderOpts, params) {
                const { column, row } = params
                return h(Image, { src: row[column.field] })
            }
        })

        // 表格配置项可以用 cellRender: { name: 'CellLink' },
        vxeUI.renderer.add('CellLink', {
            renderTableDefault(renderOpts) {
                const { props } = renderOpts
                return h(Button, { size: 'small', type: 'link' }, { default: () => props?.text })
            }
        })

        Tag

        // 开关标签 cellRender: { name: 'SwitchTag' },
        vxeUI.renderer.add('SwitchTag', {
            renderTableDefault(renderOpts, params) {
                const { column, row } = params
                const { props } = renderOpts
                const {
                    checkedChildren = '开启',
                    uncheckedChildren = '关闭',
                    checkedValue = 1,
                    checkedColor = '#389e0d',
                    uncheckedColor = '#ddd'
                } = props || {}
                const value = row[column.field] as any

                const flag = value === checkedValue
                return (
                    <Tag color={flag ? checkedColor : uncheckedColor}>
                        {flag ? checkedChildren : uncheckedChildren}
                    </Tag>
                )
            }
        })

        // OptionsText 文本 cellRender: { name: 'SwitchTag' },
        vxeUI.renderer.add('OptionsText', {
            renderTableDefault(renderOpts, params) {
                const { column, row } = params
                const { props } = renderOpts

                const value = row[column.field] as any
                const arr2 = Array.isArray(value) ? value : [value]
                const arr = (isEmpty(value) ? [] : arr2).map((item: any) => {
                    if (props?.options) {
                        return getOptionsItemByValue(item, props.options)
                    }

                    if (isString(item)) {
                        return {
                            label: item,
                            value: item
                        }
                    }

                    const field = props?.field

                    if (field) {
                        return {
                            label: item[field],
                            value: item[field]
                        }
                    }

                    return ''
                })

                function getColor(item: any, index: number) {
                    const color1 = props?.color
                    const color2 = props?.componentProps?.color
                    if (color1) {
                        if (typeof color1 === 'function') {
                            return color1(item?.value, index) || color2 || ''
                        } else if (isString(color1)) {
                            return color1 || color2 || ''
                        } else if (Array.isArray(color1) && color1[index]) {
                            return color1[index]
                        }
                    }

                    return color2 || ''
                }

                return arr.map((item: any, index: number) => {
                    return (
                        <div {...props?.componentProps} style={{ color: getColor(item, index) }}>
                            {item?.label || ''}
                        </div>
                    )
                })
            }
        })

        // 标签 cellRender: { name: 'SwitchTag' },
        vxeUI.renderer.add('Tag', {
            renderTableDefault(renderOpts, params) {
                const { column, row } = params
                const { props } = renderOpts

                const value = row[column.field] as any
                const arr2 = Array.isArray(value) ? value : [value]
                const arr = (isEmpty(value) ? [] : arr2).map((item: any) => {
                    if (props?.options) {
                        const obj = getOptionsItemByValue(item, props.options)
                        return {
                            label: unref(obj?.label || ''),
                            value: obj?.value
                        }
                    }

                    if (isString(item)) {
                        return {
                            label: item,
                            value: item
                        }
                    }

                    const field = props?.field

                    if (field) {
                        const fieldVal = unref(item[field] || '')
                        return {
                            label: fieldVal,
                            value: fieldVal
                        }
                    }

                    return ''
                })

                function getColor(item: any, index: number) {
                    const color1 = props?.color
                    const color2 = props?.componentProps?.color
                    if (color1) {
                        if (typeof color1 === 'function') {
                            return color1(item?.value, index) || color2 || ''
                        } else if (isString(color1)) {
                            return color1 || color2 || ''
                        } else if (Array.isArray(color1) && color1[index]) {
                            return color1[index]
                        }
                    }

                    return color2 || ''
                }

                return arr.map((item: any, index: number) => {
                    const lb = unref(item?.label || '')
                    return (
                        <Tag {...props?.componentProps} color={getColor(item, index)}>
                            {lb}
                        </Tag>
                    )
                })
            }
        })

        // 复制文本 cellRender: { name: 'CopyText' },
        vxeUI.renderer.add('CopyText', {
            renderTableDefault(renderOpts, params) {
                const { column, row } = params
                const { props } = renderOpts

                const text = props?.i18n ? $t(row[column.field] || '') : row[column.field]
                return (
                    <span onClick={() => copyText(text)} style="cursor: pointer">
                        {text}
                    </span>
                )
            }
        })

        vxeUI.renderer.add('Switch', {
            renderTableDefault(renderOpts, params) {
                const { column, row } = params
                const { props } = renderOpts
                const checked = row[column.field]
                return <Switch {...props?.componentProps} checked={checked}></Switch>
            }
        })

        vxeUI.renderer.add('CustomRender', {
            renderTableDefault(renderOpts, params) {
                const { column, row } = params
                const { props } = renderOpts
                const value = row[column.field]
                return props?.customRender(value, params)
            }
        })

        // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
        // vxeUI.formats.add
    },
    useVbenForm
})

export { useVbenVxeGrid }

export type * from '@vben/plugins/vxe-table'
